.container {
  transform-origin: bottom right;
  overflow: hidden;
  position: absolute;
  border: solid 1px var(--radial-menu-border);

  &.disabled {
    opacity: 0.6;

    .contentContainer {
      cursor: not-allowed;
    }
  }

  &:not(.disabled) {
    .contentContainer {
      cursor: pointer;

      &:hover {
        color: var(--radial-menu-active-color);
        background: var(--radial-menu-active-background);
      }
    }
  }

  .contentContainer {
    width: 200%;
    height: 200%;
    transform-origin: 50% 50%;
    border-radius: 50%;
    outline: none;
    transition: background 150ms ease-in-out;
    color: var(--radial-menu-color);

    .contentInner {
      position: absolute;
      width: 100%;
      text-align: center;

      .content {
        display: inline-block;
      }
    }
  }

  svg {
    margin: 0 auto;
    fill: var(--radial-menu-active-color);
    height: 25px;
    width: 25px;
    display: block;
  }
}
